<template>
  <div class="app-container">
    <div><el-button type="primary" @click="addChapter()">添加章节</el-button></div>
    <ul class="chatpterList" style="list-style: none; margin: 0; padding: 0">
      <li v-for="chapter in chatpterList" :key="chapter.id" style="clear: both">
        <p
          style="
            font-size: 20px;
            margin: 10px 0;
            padding: 10px;
            height: 70px;
            line-height: 50px;
            width: 100%;
            border: 1px solid #ddd;
          "
        >
          {{ chapter.title }}
          <span class="acts" style="float: right; font-size: 14px">
            <el-button type="text" @click="addVideo(chapter.id)">添加课时</el-button>
            <el-button type="text" @click=" editChapter(chapter.id)" >编辑</el-button>
            <el-button type="text" @click="deleteChapter(chapter.id)">删除</el-button>
          </span>
        </p>
        <ul class="videoList" style="list-style: none">
          <li v-for="video in chapter.children" :key="video.id">
            <p
              style="
                font-size: 14px;
                margin: 10px 0;
                padding: 10px;
                height: 50px;
                line-height: 30px;
                width: 100%;
                border: 1px solid #ddd;
              "
            >
              {{ video.title }}
              <span class="acts" style="float: right; font-size: 14px">
                <el-tag
                  v-if="!video.videoSourceId"
                  size="mini"
                  type="warning"
                  >{{ "尚未上传视频" }}</el-tag
                >
                <el-tag v-if="video.free" size="mini" type="success">{{
                  "免费观看"
                }}</el-tag>
                <el-button type="text" @click="editVideo(video.id)">编辑</el-button>
                <el-button type="text" @click="deleteVideo(video.id)">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
      <!-- 添加章节 -->
      <chapter-form  ref="form"/>
      <!-- 添加视频 -->
      <video-form ref="video"/>
    <div style="text-align: center">
      <el-button type="primary" @click="prev">上一步</el-button>
      <el-button type="primary" @click="next">下一步</el-button>
    </div>
  

  </div>
</template>
<script>
import ChatpterApi from "@/api/chapter";
import ChapterForm from "@/views/course/componets/Chapter/Form.vue";
import VideoForm from "@/views/course/componets/Video/Form.vue";
export default {
  components: { ChapterForm,VideoForm },
  data() {
    return {
      chatpterList: {},
    };
  },
  created() {
    this.fetchData();
    //console.log(this.$parent.courseId)
  },
  methods: {
    prev() {
      this.$parent.active = 0;
    },
    next() {
      this.$parent.active = 2;
    },
    addChapter(){
      this.$refs.form.open();
      console.log("--------------")
    },
    addVideo(chapterId){
      this.$refs.video.vopen(chapterId);
      console.log("--------------")
    },
    editVideo(videoId){
      this.$refs.video.edit(videoId);
       this.$refs.video.vopen();
       console.log(videoId)
      console.log("--------------")
      
    },
    deleteVideo(id){
      this.$refs.video.removeVideo(id);
    },
    deleteChapter(id){
      this.$refs.form.deleteChapter(id);//
    },
    test(){
      console.log("test")
    },
    fetchData() {
      console.log("fecth............")
      ChatpterApi.getNestList(this.$parent.courseId).then((res) => {
        this.chatpterList = res.data.items;
      });
    },
    //编辑chapter
     editChapter(chapterId){
       console.log(chapterId)
      this.$refs.form.open(chapterId);
     }
  },
  
};
</script>
<style>
.chapterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  clear: both;
}
.chapterList li {
  clear: both;
}
.chapterList ul {
  clear: both;
}
.chapterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.videoList li {
  clear: both;
}
</style>